<template>
    <div class="cart-page">
        <!-- 返回图标 -->
        <div class="back-icon" @click="$router.go(-1)">
            <van-icon name="arrow-left" size="24" />
        </div>
        <!-- 购物车商品列表 -->
        <div class="cart-items">
            <div v-if="cartItems.length > 0" class="cart-item" v-for="item in cartItems" :key="item.id">
                <img :src="item.image" alt="Product Image" class="product-image">
                <div class="product-details">
                    <div class="product-name">{{ item.name }}</div>
                    <div class="product-price">￥{{ item.price }}</div>
                </div>
            </div>
            <div v-else class="empty-cart">
                <img src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/your-empty-cart-image.jpg" alt="Empty Cart" class="empty-cart-image">
                <div class="empty-cart-message">您的购物车空空如也，赶紧行动吧！</div>
            </div>
        </div>
       
        <div class="checkout-section">
            <div class="total-price">合计: ￥{{ totalPrice }}</div>
            <button class="checkout-button" :disabled="cartItems.length === 0" @click="checkout">
                {{ cartItems.length === 0 ? '购物车为空，无法结算' : '立即结算' }}
            </button>
        </div>
    </div>
</template>

<script>
export default {
    components: {
        'van-icon': () => import('vant/lib/icon')
    },
    data() {
        return {
            cartItems: [],
            totalPrice: 0
        };
    },
    created() {
    this.$axios.get("http://localhost:8888/cart").then(res => {
        console.log(res, '获取购物车数据成功');
        if (res.data && Array.isArray(res.data.items)) {
            this.cartItems = res.data.items;
        } else {
            console.warn('返回的数据格式不正确', res.data);
            this.cartItems = [];
        }
        this.calculateTotalPrice();
    }).catch(err => {
        console.error(err, '获取购物车数据失败');
        this.cartItems = []; 
    });
},
    methods: {
        calculateTotalPrice() {
            this.totalPrice = this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
        },
        checkout() {
            if (this.cartItems.length === 0) {
                alert('购物车为空，无法结算');
                return;
            }
        
            alert('立即结算');
        }
    }
};
</script>

<style lang="less" scoped>
.cart-page {
    padding: 20px;
    position: relative;
}

.back-icon {
    position: absolute;
    top: 20px;
    left: 20px;
    cursor: pointer;
}

.cart-items {
    margin-top: 50px;
}

.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.product-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin-right: 20px;
}

.product-details {
    flex-grow: 1;
}

.product-name {
    font-size: 16px;
    margin-bottom: 5px;
}

.product-price {
    color: #ff6700;
    font-size: 14px;
}

.empty-cart {
    text-align: center;
    margin-top: 50px;
}

.empty-cart-image {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin-bottom: 20px;
}

.empty-cart-message {
    font-size: 16px;
    color: #999;
}

.checkout-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 4px;
}

.total-price {
    font-size: 16px;
    color: #ff6700;
}

.checkout-button {
    padding: 10px 20px;
    background-color: #ff6700;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.checkout-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.checkout-button:hover:not(:disabled) {
    background-color: #e8580c;
}
</style>